<template>
  <div class="free-shipping">
    <el-form-item label="优惠类型" prop="rules.type" required>
      <el-radio-group v-model="activityDetail.model.rules.type">
        <el-radio label="money">按消费金额包邮</el-radio>
        <el-radio label="num">按购买件数包邮</el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="label-inner">
      <el-form-item>
        <el-form-item :label="`规则`" label-width="fit-content" required>
          <el-form-item
            class="is-no-asterisk"
            label="消费满"
            label-width="fit-content"
            prop="rules.full_num"
            :rules="activityDetail.rules.full_num"
          >
            <el-input class="sa-w-120" v-model="activityDetail.model.rules.full_num" type="number">
              <template #append>
                {{ activityDetail.model.rules.type == 'money' ? '元' : '件' }}
              </template>
            </el-input>
            <span class="tip sa-m-l-12">满邮金额优惠按照商品实际金额计算</span>
          </el-form-item>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item label="不支持地区" label-width="fit-content" required>
          <div>
            <div class="sa-flex">
              <template v-for="level in activityDetail.model.rules.district_text" :key="level">
                <template v-for="name in level" :key="name">{{ name }},</template>
              </template>
            </div>
            <el-button class="is-link" type="primary" @click="selectArea">添加地区</el-button>
          </div>
        </el-form-item>
      </el-form-item>
    </div>
  </div>
</template>
<script setup>
  import { useModal } from '@/sheep/hooks';
  import AreaSelect from '../../../data/area/select.vue';
  const props = defineProps(['activityDetail']);

  function selectArea() {
    useModal(
      AreaSelect,
      {
        title: '选择地区',
        selected: {
          province: props.activityDetail.model.rules.province_except,
          city: props.activityDetail.model.rules.city_except,
          district: props.activityDetail.model.rules.district_except,
        },
      },
      {
        confirm: (res) => {
          for (var level in res.data) {
            let ids = [];
            for (var id in res.data[level]) {
              ids.push(id);
            }
            props.activityDetail.model.rules[level + '_except'] = ids.join(',');
          }
          props.activityDetail.model.rules.district_text = res.data;
        },
      },
    );
  }
</script>
